<template>
	<view>
		<page-head headTitle="找美食" :returnButton="true" :news="true" :sao="true" @clickLeftReturn="clickLeftReturn" @clickRightNews="clickRightNews" @clickRightSao="clickRightSao"></page-head>
		<view class="flex bg-white p-l-r3 p-t-b3 justify-between fixed fixed-top9">
			<view class="flex flex-1 m-r1 bg-search search-h align-center border-r p-l2">
				<text class="iconfont icon-biaoqing search-icon"></text>
				<input class="search-width" placeholder-class="input-goods fs-3 search-width" type="text" id="keyword" placeholder="" @input="setKeyword">
		    </view>
			<view class="flex search-h search-button justify-content align-center border-r" @tap="getList">搜索</view>
		</view>
		<view class="delicacy-mt p-l-r3">
			<view class="bg-white flex p-t-b4 p-l-r border-r2 m-b2" v-for="(item,index) in list" @tap="goDetails" :data-id="item.id">
				<image :src="item.image" class="delicacy-image mr" mode="widthFix"></image>
				<view class="flex-1 min-width">
					<text class="width flex color-table line-height">{{item.seller_name}}</text>
					<text class="fs-2 flex-1 flex width white-space m-t1">{{item.name}}</text>
					<view class="flex justify-between align-items width purchase-m">
						<text class="purchase-color">￥<text class="purchase-fs">{{item.price}}</text></text>
						<button class="purchase fs-32 bg-color">购买</button>
					</view>
				</view>
			</view>
			<view class="loading">{{loadingText}}</view>
		</view>
	
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
var timer = null;
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				list:{},
				keyword:'',
				page:1,
				is_last:0,
				onload:0,
				loadingText:'',
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if(this.last != 1 && this.onload !=1){ 
				this.page+=1;
				this.getNext();
			}
		},
		methods: {
			clickLeftReturn(){
				uni.redirectTo({
				    url: '../index/index'
				});
			},
			//设置关键词
			setKeyword(event){
				var v = event.target.value;
				this.keyword = v.replace(/\s*/g,"");
			},
			//下一页
			getNext(){
				if(this.onload == 1 || this.is_last == 1){
					return false;
				}
				this.onload = 1;
				this.loadingText = '加载中...';
				uni.showNavigationBarLoading();
				this.$myRequest({
					method:'POST',
					url:'/api/goods/search',
					data:{
						key:this.keyword,
						page:this.page,
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						var result_list = res.data.data.list;
						if(result_list == ''){
							this.last = 1;
							uni.hideNavigationBarLoading();
							this.loadingText = '已加载全部';
						}else{
							this.list = this.list.concat(result_list);
							this.loadingText = '加载更多';
							uni.hideNavigationBarLoading();
						}
					}
					this.onload = 0;
				})
			},
			//美食列表
			getList(){
				this.$myRequest({
					method:'POST',
					url:'/api/goods/search',
					data:{
						key:this.keyword,
						page:1,
					},
				}).then(res=>{
					//console.log(res);
					if(res.data.code == 1){
						this.list = res.data.data.list
					}
				})
			},
			//跳转详情页
			goDetails(e){
				var gid = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../goods-index/goods-index?id='+gid,
				});
			},
			// 消息中心
			clickRightNews(){
				uni.navigateTo({
				    url: '../news-core/news-core'
				});
			},
			// 扫一扫
			clickRightSao(){
				
			}
		}
	}
</script>

<style scoped>
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.delicacy-mt{margin-top: 286rpx;}
.purchase-m{margin-top: 26rpx;}
.delicacy-image{width: 170rpx;height: 170rpx;}
.purchase{margin-right: 0 !important; width: 140rpx;height: 64rpx;line-height: 2;}
.purchase-color{color: #FF4141; line-height: 1;}
.purchase-fs{font-size: 40rpx;font-weight: 600 !important;}
.loading{text-align:center; line-height:80px;}
</style>
